<template>
	<div class="fooddetail">
		<div class="fooddetail_contain">
			<!--加入购物车按钮-->

			<div class="shoppingc" @click="carClick">
				<i class="iconfont icon" style="font-size: 50px;">&#xe61b;</i>
			</div>

			<el-dialog title="加入购物车" :visible.sync="dialogFormVisible" width="600px" center>
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item>
						{{form.clickfoodname}}
					</el-form-item>
					<el-form-item style="margin-top: 20px" label="辣度" prop="label">
						<el-radio-group v-model="form.radio1" size="medium">
							<el-radio-button label="微辣"></el-radio-button>
							<el-radio-button label="特辣"></el-radio-button>
							<el-radio-button label="不辣"></el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item style="margin-top: 20px" label="甜度" prop="label">
						<el-radio-group v-model="form.radio2" size="medium">
							<el-radio-button label="多糖"></el-radio-button>
							<el-radio-button label="少糖"></el-radio-button>
							<el-radio-button label="正常"></el-radio-button>
						</el-radio-group>
					</el-form-item>
					<!--添加数量-->
					<el-form-item label="数量">
						<el-input-number v-model="form.num" :min="1" :max="10" label="数量">
						</el-input-number>
					</el-form-item>
				</el-form>
				<!--添加和取消按钮-->
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addfood">确 定</el-button>
				</div>
			</el-dialog>


			<div class="fooddetail_contain_up" v-model="food">
				<!--菜品图片-->
				<el-card class="fcu_img">
					<img :src="`http://localhost:8080/res/${food.food_img}`" width="100%">
				</el-card>

				<el-card class="fcu_desc">
					<div class="fcu_desc_foodname">{{food.food_name}}</div>
					<!--菜品评分-->
					<el-rate class="fcu_desc_rate" v-model="value" disabled show-score text-color="#ff9900" score-template="{value}">
					</el-rate>

					<div class="fcu_desc_sale">月销量：{{food_month_sale}}</div>

					<div class="hr" />

					<el-card class="fcu_desc_desc">
						{{food.food_depiction}}
					</el-card>
				</el-card>
			</div>


			<div class="fooddetail_contain_down">

				<div class="fcd_all"><span>{{comment_num}}条网友点评</span></div>

				<el-card class="fcd_comments">
					<!--评论排序-->
					<div style="margin-top: 10px;margin-bottom: 10px">
						<el-radio-group v-model="radio2" size="medium">
							<el-radio-button @click.native="loadEvaluation" label="按时间"></el-radio-button>
							<el-radio-button @click.native="byQuality" label="按质量"></el-radio-button>
							<el-radio-button  label="只看带图" @click.native="byImg"></el-radio-button>
						</el-radio-group>
					</div>

					<!--单个评论里布局-->
					<div class="fcd_comm" shadow="never" v-for="evaluation in evaluationList">
						<!-- 显示用户的头像 -->
						<div class="fcd_comm_pic">
							<div class="pic">
								<el-avatar :src="`http://localhost:8080/res/${evaluation.customeruser.head_img}`" :size="60"> </el-avatar>
							</div>
						</div>
						<div class="fcd_comm_comm">
							<!-- 想办法获得用户的名字 -->
							<div class="fcd_comm_name">{{evaluation.customeruser.user_name}}</div>
							<el-rate class="fcd_comm_rate" :value="evaluation.evaluation_lv" disabled show-score text-color="#ff9900"
							 score-template="{value}">
							</el-rate>
							<div class="fcd_comm_date">{{evaluation.evaluation_time}}</div>
							<div class="fcd_comm_text">
								{{evaluation.evaluation_content}}
							</div>
							<img v-show="evaluation.evaluation_img" :src="`http://localhost:8080/res/${evaluation.evaluation_img}`" width="120px" height="120px">
							<div class="hr" />
						</div>
					</div>
					
				</el-card>
			</div>
		</div>

		<div class="fooddetail_shop">
			<el-card class="fooddetail_shop_person">
				<div class="fsp_img">
					<el-avatar shape="square" :size="80" :src="url"></el-avatar>
				</div>
				<div class="fsp_link">
					<router-link to="/personal/historyOrder">
						<i class="iconfont">&#xe61a;</i> 历史订单
					</router-link>
				</div>
				<div class="fsp_link">
					<router-link to="/personal/redBag"><i class="iconfont">&#xe615;</i> 我的红包</router-link>
				</div>
				<div class="fsp_link">
					<router-link to="/personal/address"><i class="iconfont">&#xe60e;</i> 个人地址</router-link>
				</div>
			</el-card>

			<el-card class="box-card">
				<div class="head">咚咚哒哒美食店</div>
				<div class="tel"><i class="iconfont">&#xe625;</i> 3417844</div>
				<div class="dress"><i class="iconfont">&#xe60e;</i> 沈阳市浑南区白塔街道东北大学浑南校区</div>
			</el-card>

		</div>

	</div>

</template>

<script>
	import FoodDetailService from './FoodDetailService.js'
	import Vue from 'vue'
	export default {
		name: 'FoodDetail',
		data() {
			return {
				radio2: '按时间',
				value: 4.5,
				src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
				url: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
				evaluationList: [],
				food_id: 1,
				food_month_sale:0,
				food: '',
				dialogFormVisible: false,
				//food_id: 5, //由上一个路由传过来
				form: {
					clickfoodname: '',
					clickfoodid: '',
					clickfooodprice: '',
					radio1: '不辣',
					radio2: '正常',
					num: 1,
				},
        comment_num:0
			}
		},
		created() {
			this.food_id = this.$route.params.foodid;
			console.log(this.foodid);
			this.loadEvaluation();
			Vue.axios.get(`http://localhost:8080/goodorderdetail/getfoodmonthsalenumber`,{
					params:{food_id:this.food_id}
			}).then(r=>{
				this.food_month_sale=r.data.foodmonthsalenum
			}),
			Vue.axios.get(`http://localhost:8080/evaluation/getavglv`,{
					params:{food_id:this.food_id}
			}).then(r=>{
				this.value=r.data.avg_lv;
			})
			FoodDetailService.countEvaluation(r=>{
			  this.comment_num=r.count_num;
			},{
				params: {
				  food_id: this.food_id,
				  //usertype: 1,
				}
			})
			FoodDetailService.getfooddetail({
				foodid: this.food_id,
			}, r => {
				this.food = r.data;
				//console.log(this.food);
			})	

		},
		mounted() {
			
		},
		
		methods: {
			carClick() {
				//console.log(foodid,foodname,foodprice);
				this.dialogFormVisible = true;
				this.form.clickfoodname = this.food.food_name;
				this.form.clickfoodid = this.food.food_id;
				this.form.clickfooodprice = this.food.food_price;
				//console.log(this.form);
			},

			// carClick() {
			// 	console.log(111);
			// 	this.dialogFormVisible = true;
			// },
			addfood() {
				this.dialogFormVisible = false;
				console.log(this.form);
				console.log('添加');
				FoodDetailService.addshoppingcartdetail({
					food_id: this.form.clickfoodid,
					food_amount: this.form.num,
					total_cost: this.form.clickfooodprice * this.form.num,
					detail_attach: `${this.form.radio1}${this.form.radio2}`
				}, r => {
					console.log(r.data);
				})
			},
			byQuality(){
				Vue.axios.get(`http://localhost:8080/evaluation/getbyquality`,{
					params:{food_id:this.food_id}
					
				}).then(r=>{
					this.evaluationList=r.data.EvaluationList
					
				})
			},
			byImg(){
				
				Vue.axios.get(`http://localhost:8080/evaluation/getwithimg`,{
					params:{food_id:this.food_id}
					
				}).then(r=>{
					this.evaluationList=r.data.EvaluationList
					
				})
				
			},
			loadEvaluation() {
				FoodDetailService.loadEvaluation(r => {
					console.log(r.EvaluationList)
					this.evaluationList = r.EvaluationList,
						console.log(this.evaluationList)

				}, {
					params: {
						food_id: this.food_id,
						//usertype: 1,
					}
				})
			},
		},
		components: {

		},
	}
</script>

<style lang="less">
	.fooddetail {
		height: 100%;
		width: 1200px;
		margin: 0 auto;
		display: flex;

		//购物车显示
		.shoppingc {
			position: fixed;
			width: 60px;
			height: 60px;
			right: 20px;
			bottom: 100px;
			border-radius: 50%;
			//background-color: #f5a8a8;
			//line-height: 40px;
			//text-align: center;
			color: #f5a8a8;
		}

		.fooddetail_contain {
			flex: 5;
			//display: flex;
			//flex-direction: column;

			.fooddetail_contain_up {
				height: 300px;
				//background-color: lightblue;
				display: flex;
				margin-top: 35px;

				.fcu_img {
					flex: 0.618;
					//background-color: lightblue;
				}

				//右上菜品信息
				.fcu_desc {
					flex: 1;
					background-color: white;

					//菜品名称
					.fcu_desc_foodname {
						font-family: "Helvetica Neue";
						font-size: 36px;
						color: gray; //字体颜色
						font-weight: 400; //加粗
					}

					//菜品评价打分
					.fcu_desc_rate {
						display: inline;

					}

					//菜品月销量
					.fcu_desc_sale {
						display: inline;
						float: right;
					}

					//菜品描述
					.fcu_desc_desc {

						margin-top: 30px;
						font-family: "Helvetica Neue";
						font-size: 14px;
						line-height: 22px;
						color: gray; //字体颜色
						font-weight: 400; //加粗
						letter-spacing: .1em;

					}

				}
			}

			//显示评论内容
			.fooddetail_contain_down {
				height: 700px;

				//background-color: lightpink;
				//有34条评论
				.fcd_all {
					display: inline;
					margin-top: 50px;
					margin-bottom: 10px;
				}

				//评论大卡片
				.fcd_comments {
					width: 100%;
					margin-top: 20px;

					//单个评论
					.fcd_comm {
						width: 100%;
						padding-top: 10px;
						display: flex;

						//flex-direction: column;
						//单个评论用户头像
						.fcd_comm_pic {
							flex: 1;
							//background-color: lightblue;
							display: flex;

							.pic {
								margin: 0 auto;
							}
						}

						//右边评论内容
						.fcd_comm_comm {
							flex: 6.18;
							//background-color: lightpink;
							font-weight: 400; //加粗
							letter-spacing: .1em;

							//用户姓名
							.fcd_comm_name {
								font-family: "Helvetica Neue";
								font-size: 18px;
								line-height: 26px;
								color: #303133; //字体颜色

							}

							//评分
							.fcd_comm_rate {
								display: inline;
							}

							//评论日期
							.fcd_comm_date {
								display: inline;
								float: right;
								font-family: "Helvetica Neue";
								font-size: 14px;
								line-height: 16px;
								color: #909399; //字体颜色

							}

							//评论内容
							.fcd_comm_text {
								font-family: "Helvetica Neue";
								font-size: 14px;
								line-height: 16px;
								color: #606266; //字体颜色
								letter-spacing: 1px;
							}
						}
					}
				}
			}
		}



		.fooddetail_shop {
			flex: 1;

			//background-color:lightpink;
			.fooddetail_shop_person {
				width: 80%;
				height: 300px;
				margin: 18% auto;
				background-color: #fdf4f4;

				.fsp_img {
					margin-left: 20px;
				}

				.fsp_link {
					margin: 25px 15px;

				}
			}

			.box-card {
				width: 80%;
				margin: 18% auto;
				height: 300px;
				background-color: #fdf4f4;

				.head {
					font-family: "Helvetica Neue";
					font-size: 22px;
					line-height: 30px;
					color: #606266; //字体颜色
					letter-spacing: 4px;
				}

				.tel {
					margin: 80px 30px 0 0;
					font-family: "Helvetica Neue";
					font-size: 14px;
					line-height: 16px;
					color: #606266; //字体颜色
					letter-spacing: 1px;
				}

				.dress {
					margin-top: 20px;
					margin-bottom: 10px;

					font-family: "Helvetica Neue";
					font-size: 14px;
					line-height: 20px;
					color: #606266; //字体颜色
					letter-spacing: 3px;
				}

			}
		}

		.hr {
			border-bottom: 1px solid #e6e6e6;
			height: 0px;
			padding-bottom: 10px;
		}



		.head {
			margin-top: 10px;
			margin-bottom: 10px;
			font-family: "Helvetica Neue";
			font-size: 18px;
			line-height: 26px;
			color: #303133; //字体颜色
		}



		a {
			font-family: "Helvetica Neue";
			font-size: 14px;
			text-decoration: none;
			color: #606266;
			font-weight: 400;
			letter-spacing: .1em;

			&:hover {
				color: dimgrey;
			}
		}
	}
</style>
